<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双打案源类型字典</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header"></div>
                <div class="layui-card-body">
                    <!--安源字典列表-->
                    <div id="ayzdTable" class="layui-card-body">
                        <form id="searchForm" class="layui-form layui-row layui-col-space16" style="margin-left: 10px">
                            <div class="layui-form-item">
                                <div class="layui-row">
                                    <div class="layui-col-md3">
                                        <div class="layui-form-item" style="display: flex; align-items: center; margin-bottom: 0;">
                                            <label class="layui-form-label" style="flex: 1; white-space: nowrap;">字典名称</label>
                                            <div style="flex: 2;">
                                                <label for="zdmc"></label>
                                                <input id="zdmc" class="layui-input" type="text" name="zdmc" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-form-item" style="display: flex; align-items: center; margin-bottom: 0;">
                                            <label class="layui-form-label" style="flex: 1; white-space: nowrap;">创建日期</label>
                                            <div style="flex: 2;">
                                                <label for="createTime"></label>
                                                <input id="createTime" class="layui-input" type="text" name="createTime" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md6">
                                        <div style="margin-left: 20px">
                                            <button type="button" class="layui-btn" lay-filter="search" onclick="searchZd()">查询</button>
                                            <button type="button" class="layui-btn" lay-filter="reset" lay-submit="reset">重置</button>
                                            <button type="button" class="layui-btn" lay-filter="add" lay-submit="add">添加字典</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <table id="ayzd_table" class="layui-table" lay-filter="ayzd_table"></table>
                    </div>
                    <!--添加字典-->
                    <div id="contentToLoad" style="display: none">
                        <form class="layui-form" action="" lay-filter="info" style="margin-top: 30px">
                            <div class="row">
                                <div class="layui-col-xs3">
                                    <label for="newZdmc" class="layui-form-label">字典名称</label>
                                </div>
                                <div class="layui-col-xs6">
                                    <input id="newZdmc" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-col-xs3"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script th:inline="none">
    //获取token
    var token = CoreUtil.getData("access_token");
    //地址栏转义token中的#号
    var tokenQuery = token.replace("#", "%23");
    var tableIns1;
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    var $ = jQuery = layui.jquery;
    var laydate = layui.laydate;
    var zd_startTime = null;
    var zd_endTime = null;
    layui.use(['table', 'laypage', 'layer', 'laydate', 'form'], function () {
        // 字典列表
        tableIns1 = table.render({
            elem: '#ayzd_table'
            , page: true //开启分页
            , contentType: 'application/json'
            , headers: {"authorization": token}
            , url: '/attention/attentionMgr/querySdaylxzdTable' //数据接口
            , method: 'POST'
            , width: 'auto' // 自动宽度
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                    "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                }
            }
            , cols: [
                [
                    {field: 'uuid', title: 'uuid', width: 100, hide: true},
                    {field: 'zdmc', title: '字典名称', width: 300, align: "center"},
                    {
                        field: 'cjsj', title: '创建时间', width: 200, align: "center", templet: function (d) {
                            if (!d.cjsj) {
                                return '';
                            }
                            return layui.util.toDateString(d.cjsj, 'yyyy-MM-dd');
                        }
                    },
                    {
                        field: 'yxbz', title: '字典状态', width: 300, align: "center", templet: function (item) {
                            var checked = item.yxbz === "Y" ? 'checked' : '';  // 判断状态
                            return `<input type="checkbox" lay-skin="switch" lay-text="正常|失效" lay-filter="switchYxbz" ${checked} data-id="${item.uuid}">`;
                        }
                    }
                ]
            ]
            , toolbar: '#toolbar'
        });
        // 创建时间
        laydate.render({
            elem: '#createTime'
            , type: 'date'
            , range: '~'
            , done: function (value, date, endDate) {
                if (value !== null && value !== undefined && value !== "") {
                    zd_startTime = value.split("~")[0];
                    zd_endTime = value.split("~")[1];
                } else {
                    zd_startTime = null;
                    zd_endTime = null;
                }
            }
        });
        //页面查询条件重置按钮
        form.on('submit(reset)', function () {
            document.getElementById('searchForm').reset(); // 原生重置表单
            $('#createTime').val(''); // 清空输入框
            zd_startTime = null; // 重置开始时间
            zd_endTime = null; // 重置结束时间
            $("#zdmc").val(''); //清空下拉选
            form.render(); // 重新渲染 Layui 的动态组件
        })
        //添加字典
        form.on('submit(add)', function () {
            // 在此处输入 layer 的任意代码
            layer.open({
                type: 1, // page 层类型
                area: ['600px', '300px'],
                title: '添加双打案源类型字典',
                shade: 0.6, // 遮罩透明度
                shadeClose: true, // 点击遮罩区域，关闭弹层
                maxmin: true, // 允许全屏最小化
                anim: 0, // 0-6 的动画形式，-1 不开启
                content: $('#contentToLoad'),
                btn: ['确定', '取消'], // 自定义按钮
                yes: function (index, layero) {
                    // 确定按钮的回调
                    const newZdmc = $('#newZdmc').val(); // 获取输入框的值
                    const encodedZdmc = encodeURIComponent(newZdmc); // 对参数进行编码
                    CoreUtil.sendPost("/attention/attentionMgr/saveAyzd/" + encodedZdmc, null, function (res) {
                        if (res.code === 0) {
                            layer.msg('保存成功！', {icon: 1});
                        } else {
                            layer.msg('保存失败！', {icon: 2});
                        }
                    });
                    //保存后执行查询方法
                    searchZd();
                    layer.close(index); // 关闭弹层
                },
                btn2: function (index, layero) {
                    // 取消按钮的回调
                    console.log('取消按钮点击');
                    layer.close(index); // 关闭弹层
                }
            });
        })
        // 监听 switch 变化事件
        form.on('switch(switchYxbz)', function (data) {
            var uuid = data.elem.getAttribute('data-id');  // 获取 data-id 的值
            // 获取当前的状态
            var yxbz = data.elem.checked ? "Y" : "N";  // "Y" 表示正常，"N" 表示失效
            // 调用保存方法
            saveStatus(yxbz, uuid);
        });

        // 保存方法
        function saveStatus(yxbz, id) {
            var requestData = {
                yxbz: yxbz,
                id: id
            };
            // 根据 id 或其他标识进行数据保存
            CoreUtil.sendPost("/attention/attentionMgr/saveAyzdStatus/", requestData, function (res) {
                if (res.code === 0) {
                    layer.msg('保存成功', {icon: 1});
                } else {
                    layer.msg('保存失败', {icon: 2});
                }
            });
        }
    });

    function searchZd() {
        tableIns1.reload({
            where: { //设定异步数据接口的额外参数，任意设
                "zdmc": $("#zdmc").val(),
                "zdstartTime": zd_startTime,
                "zdendTime": zd_endTime,
            }
            , page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }
</script>
</body>

</html>